<template>
  <ul class="foot">
    <li>
      <i class="safe"></i>
      <div>
        <h5>商品保障</h5>
        <h6>正品保障</h6>
        <h6>物流配送 | 24小时发货</h6>
      </div>
    </li>
    <li>
      <i class="kefu"></i>
      <div @mouseout="showImg(false)" @mouseover="showImg(true)">
        <h5>联系客服</h5>
        <img class="img-s" :src="logoObj.servicePic || initImg" alt="客服微信">
        <transition name="el-fade-in-linear">
          <img v-show="isShow" class="img-l" :src="logoObj.servicePic || initImg" alt="客服微信">
        </transition>
      </div>
    </li>
    <li>
      <i class="hezuo"></i>
      <div>
        <h5>招商合作</h5>
        <h6>助力3c零售商互联网转型</h6>
        <h6>开启新零售时代全新旅程</h6>
      </div>
    </li>
  </ul>
</template>
<script type="text/ecmascript-6">
export default {
  name: 'foot',
  data () {
    return {
      isShow: false,
      initImg: require('../../../assets/images/weiCode.png'),
      logoObj: {}
    }
  },
  methods: {
    showImg (bol) {
      this.isShow = bol
    }
  },
  mounted () {
    if (sessionStorage.getItem('__logoInfo__')) {
      this.logoObj = JSON.parse(sessionStorage.getItem('__logoInfo__'))
    }
  }
}
</script>
<style lang="stylus" rel="stylesheet/stylus" scoped>
@import '../../../assets/stylus/index.styl'
.foot
  padding 40px 120px
  display flex
  // background #F9F9F9
  // border 1px solid #D9D7D7
  justify-content space-between
  li
    display flex
    i
      display inline-block
      width 60px
      height 60px
      background-position center
      background-size contain
      background-repeat no-repeat
      fontSize($iconSize, 1, $iconColor)
      margin-right 14px
    .safe
      background-image url('../../../assets/images/safe.png')
    .kefu
      background-image url('../../../assets/images/kefu.png')
    .hezuo
      background-image url('../../../assets/images/hezuo.png')
    >div
      position relative
      h5
        fontSize($fontSize-m, 1, $fontColor)
      h6
        fontSize($fontSize, 1, $fontColor-gray)
        margin-top 12px
      .img-s
        width 50px
        // height 50px
        max-height 60px
        margin-top 12px
        cursor pointer
      .img-l
        position absolute
        background #ffffff
        left 0
        right 0
        bottom 50px
        margin 0 auto
        width 200px
        // height 200px
        z-index 10
        cursor pointer
</style>
